<template>
    <div>

        <el-button type="primary" @click="createHandle">增加</el-button>
        <el-table
                border
                class="g-table"
                element-loading-spinner="el-icon-loading"
                :data="domains"
        >
            <el-table-column align="center" type="selection" width="50"/>
            <el-table-column
                    align="center"
                    label="域名"
                    prop="name"/>
            <el-table-column
                    align="center"
                    label="备注"
                    prop="mark"/>
            <el-table-column
                    align="center"
                    label="状态"
                    prop="mark">
                <template v-slot="{row}">
                    <el-button size="mini" :type="row.status===1?'success':'info'" @click="enableHandle(row)">{{
                            row.status === 1 ? '启用' : '停用'
                        }}
                    </el-button>
                </template>
            </el-table-column>
            <el-table-column
                    align="center"
                    label="操作"
                    width="150"
                    fixed="right">
                <template v-slot="{ row }">
                    <el-button
                            sort="edit"
                            type="text"
                            size="small"
                            @click="resolve(row)">
                        解析
                    </el-button>
                    <el-button
                            sort="delete"
                            type="text"
                            size="small"
                            @click="del(row)">
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-form :model="domain"
                 :rules="rules"
                 ref="ruleForm"
        >
            <el-drawer v-model="drawer" title="编辑域名">
                <el-form-item label="域名" prop="name">
                    <el-input v-model="domain.name" maxlength="60" minlength="1"></el-input>
                </el-form-item>
                <el-form-item label="状态" prop="status">
                    <el-switch v-model="domain.status"></el-switch>
                </el-form-item>
                <el-form-item label="描述" prop="mark">
                    <el-input v-model="domain.mark" type="textarea" show-word-limit maxlength="20"></el-input>
                </el-form-item>

                <el-button type="primary" @click="save">保存</el-button>
                <el-button>返回</el-button>
            </el-drawer>

        </el-form>
    </div>
</template>

<script lang="ts">
import {defineComponent, inject, reactive, ref, toRefs} from 'vue'
import HttpClient from '@/classes/HttpClient'
import {useRouter} from 'vue-router'
import {DomainInDto, DomainOutDto} from '@/classes/dto/Domain';
import {ElButton, ElForm, ElFormItem, ElTable, ElTableColumn} from 'element-plus';
import Base from '@/components/Base.vue';
import {RuleItem} from 'async-validator';
import {Paths} from '@/classes/Paths';
import {Result} from '@/classes/BaseDto';

export default defineComponent({
    name: 'Domain',
    components: {
        ElFormItem, ElButton, ElTable, ElTableColumn, ElForm
    },
    extends: Base,
    setup() {

        const domains: DomainOutDto[] = []

        const http: HttpClient | undefined = inject('$http')

        const domain = new DomainInDto();

        domain.status = 0

        const rules: { [key: string]: RuleItem | RuleItem[] } = {
            name: [
                {
                    required: true,
                    message: '域名不能为空!',
                },
                {
                    min: 1,
                    max: 60,
                    message: '域名长度为1~60',
                },
            ],
            status: {
                required: true,
                message: '状态必须选择!',
            }
        }
        const data = reactive({

            domain,
            loading: false,
            visible: false,
            drawer: false,
            domains,
            selection: []
        })

        // /record/list

        const router = useRouter()

        const ruleForm = ref()

        return {
            http,
            rules,
            ruleForm,
            ...toRefs(data),
            router

        }
    },

    created() {
        this.list();
    },

    methods: {

        del(d: DomainInDto) {
            this.http?.request<DomainOutDto>(Paths.D_DEL, d)

                    .then((res: Result<DomainOutDto>) => {

                        this.list()
                    })
                    .catch(reason => {

                        console.info('========reason==', reason)

                        this.$message({

                            message: '操作失败:' + reason,

                            type: 'error'
                        })
                    })
        },

        list() {

            this.http?.request<DomainOutDto>(Paths.D_LIST)

                    .then((res: Result<DomainOutDto>) => {

                        this.domains.length = 0

                        this.domains = this.domains.concat(res.data)
                    })

                    .catch(reason => {
                        console.info('========reason==', reason)
                        this.$message({
                            message: '操作失败:' + reason,
                            type: 'error'
                        })
                    })
        },

        save() {

            this.ruleForm?.validate((r: boolean) => {

                if (!r) {

                    return
                }
                
                this.domain.status = this.domain.status ? 1 : 0

                this.http?.request<DomainInDto>(Paths.D_SAVE, this.domain)

                        .then((res: Result<DomainInDto>) => {

                            this.$message({
                                message: '操作成功!',
                                type: 'success'
                            })

                            this.list()
                            this.drawer = false
                        })

                        .catch(reason => {
                            this.$message({
                                message: '操作失败:' + reason,
                                type: 'error'
                            })
                        })
            })
        },

        createHandle() {
            this.drawer = true
        },

        resolve(row: DomainOutDto) {
            console.info('id---->', row)
            this.router.push({
                path: '/domain/resolve',
                query: {
                    id: row.id,
                    // name: row.name
                }
            })
        },
        enableHandle(item: DomainOutDto) {

            const d = new DomainInDto()

            d.status = item.status === 1 ? 0 : 1
            d.id = item.id

            this.http?.request<DomainOutDto>(Paths.D_STATUS, d)

                    .then((res: Result<DomainOutDto>) => {

                        this.list()
                    })
                    .catch(reason => {

                        console.info('========reason==', reason)

                        this.$message({

                            message: '操作失败:' + reason,

                            type: 'error'
                        })
                    })
        }
    }
})
</script>

<style lang="scss" scoped>
.role-name-span + .role-name-span {
    margin-left: 10px;
}
</style>
